﻿@page
@using ProductManagement
@using Volo.Abp.Settings
@model PublicWebSite.Host.Pages.ProductsModel
@using Volo.Abp.AspNetCore.Mvc.UI.Theming
@inject IThemeManager ThemeManager
@inject ISettingProvider SettingProvider
@{
    const int columnSize = 3;
    Layout = ThemeManager.CurrentTheme.GetApplicationLayout();
}
@section styles{
    <link href="~/Pages/Products.css" rel="stylesheet" />
}
<h3 class="pt-5 pb-4 text-center">Our Products</h3>
<div class="product-list">
    @for (int i = 0; i < Math.Ceiling(Model.Products.Items.Count / (double)columnSize); i++)
    {
        <abp-row>
            @for (int j = 0; j < columnSize; j++)
            {
                <abp-column size-lg="_4" size-md="_6" size-sm="_12">
                    @if ((i * columnSize) + j < Model.Products.Items.Count)
                    {
                        var product = Model.Products.Items[(i * columnSize) + j];
                        <div class="product-list-item">
                            @if (!product.ImageName.IsNullOrEmpty())
                            {
                                <img src="/product-images/@product.ImageName" />
                            }
                            else
                            {
                                <img src="/product-images/noimage.jpg" />
                            }
                            <div class="row mt-5">
                                <div class="col">
                                    <div class="product-info-box">
                                        <h6>@product.Name</h6>
                                        <em class="d-block text-muted">@product.Code - Stock count: @product.StockCount</em>
                                    </div>
                                </div>
                                <div class="col-auto text-right text-danger">
                                    <strong class="product-price">$@product.Price</strong>
                                </div>
                            </div>
                        </div>
                    }
                </abp-column>
            }
        </abp-row>
    }
</div>

@* An example to show how to read settings from the client side / UI *@
<p class="text-muted mt-5"><i>Maximum allowed page size: @await SettingProvider.GetOrNullAsync(ProductManagementSettings.MaxPageSize)</i></p>